<template>
  <div>
    <el-row>
      <el-date-picker v-model="selectDate" type="month" format="yyyy 年 MM 月" value-format="yyyy-MM" placeholder="选择月"
        style="margin: 0 10px 10px 0">
      </el-date-picker>
      <el-input v-model="name" placeholder="请输入单位名称" style="width: 250px;margin: 0 10px 0 0;"></el-input>
      <el-button type="primary" @click="showData">查询</el-button>
    </el-row>
    <el-table :data="tableData" border height="700px" style="width: 100%">
      <el-table-column prop="id" label="序号" min-width="10%" v-if="false">
      </el-table-column>
      <el-table-column prop="number" label="序号" min-width="100px">
      </el-table-column>
      <el-table-column prop="name" label="单位名称" min-width="100px">
      </el-table-column>
      <el-table-column prop="area" label="乡镇" min-width="100px">
      </el-table-column>
      <el-table-column prop="organizationcode" label="组织机构代码" min-width="100px">
      </el-table-column>
      <el-table-column prop="industrycode" label="行业代码" min-width="100px">
      </el-table-column>
      <el-table-column prop="type" label="登记注册类型" min-width="100px">
      </el-table-column>
      <el-table-column prop="yysrCurrentccumulate" label="营业收入本期累计" min-width="100px">
      </el-table-column>
      <el-table-column prop="yysrPreviousaccumulate" label="营业收入同期累计" min-width="100px">
      </el-table-column>
      <el-table-column prop="yysrMonthonmonth" label="营业收入同比" min-width="100px">
      </el-table-column>
      <el-table-column prop="lrzeCurrentccumulate" label="利润总额本期累计" min-width="100px">
      </el-table-column>
      <el-table-column prop="lrzeMonthonmonth" label="利润总额同比" min-width="100px">
      </el-table-column>
      <el-table-column prop="lszeCurrentccumulate" label="利税总额本期累计" min-width="100px">
      </el-table-column>
      <el-table-column prop="lszePreviousaccumulate" label="利税总额同期累计" min-width="100px">
      </el-table-column>
      <el-table-column prop="lszeMonthonmonth" label="利税总额同比" min-width="100px">
      </el-table-column>
      <el-table-column prop="sectorcode" label="行业大类" min-width="100px">
      </el-table-column>
      <el-table-column prop="sectorname" label="行业名称" min-width="100px">
      </el-table-column>
      <el-table-column prop="group" label="归属集团/同一法人" min-width="100px">
      </el-table-column>
      <el-table-column prop="gxjsbj" label="高新技术产业标记1" min-width="100px">
      </el-table-column>
      <el-table-column prop="zlxbj" label="战略性新兴产业标记1" min-width="100px">
      </el-table-column>
      <el-table-column prop="whcybj" label="文化产业标记1" min-width="100px">
      </el-table-column>
      <el-table-column prop="zdbj" label="月报重点企业标记1" min-width="100px">
      </el-table-column>
      <el-table-column prop="statisticalTime" label="日期" min-width="10%">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150px">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="primary" size="small">编辑</el-button>
          <el-button @click="delData(scope.row)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      @current-change="showData"
      @prev-click="showData(page-1)"
      @next-click="showData(page+1)"
      :page-count="total"
      style="position: absolute;left: 50%;transform: translate(-50%);"
      >
    </el-pagination>
    <el-dialog title="修改数据" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="序号" :label-width="formLabelWidth">
          <el-input v-model="form.number" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单位名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="乡镇" :label-width="formLabelWidth">
          <el-input v-model="form.area" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="组织机构代码" :label-width="formLabelWidth">
          <el-input v-model="form.organizationcode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="行业代码" :label-width="formLabelWidth">
          <el-input v-model="form.industrycode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="登记注册类型" :label-width="formLabelWidth">
          <el-input v-model="form.type" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="营业收入本期累计" :label-width="formLabelWidth">
          <el-input v-model="form.yysrCurrentccumulate" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="营业收入同期累计" :label-width="formLabelWidth">
          <el-input v-model="form.yysrPreviousaccumulate" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="营业收入同比" :label-width="formLabelWidth">
          <el-input v-model="form.yysrMonthonmonth" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="利润总额本期累计" :label-width="formLabelWidth">
          <el-input v-model="form.lrzeCurrentccumulate" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="利润总额同期累计" :label-width="formLabelWidth">
          <el-input v-model="form.lrzePreviousaccumulate" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="利润总额同比" :label-width="formLabelWidth">
          <el-input v-model="form.lrzeMonthonmonth" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="利税总额本期累计" :label-width="formLabelWidth">
          <el-input v-model="form.lszeCurrentccumulate" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="利税总额同期累计" :label-width="formLabelWidth">
          <el-input v-model="form.lszePreviousaccumulate" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="利税总额同比" :label-width="formLabelWidth">
          <el-input v-model="form.lszeMonthonmonth" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="行业大类" :label-width="formLabelWidth">
          <el-input v-model="form.sectorcode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="行业名称" :label-width="formLabelWidth">
          <el-input v-model="form.sectorname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="归属集团/同一法人" :label-width="formLabelWidth">
          <el-input v-model="form.group" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="高新技术产业标记1" :label-width="formLabelWidth">
          <el-input v-model="form.gxjsbj" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="战略性新兴产业标记1" :label-width="formLabelWidth">
          <el-input v-model="form.zlxbj" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="文化产业标记1" :label-width="formLabelWidth">
          <el-input v-model="form.whcybj" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="月报重点企业标记1" :label-width="formLabelWidth">
          <el-input v-model="form.zdbj" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateForm">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  methods: {
    handleClick (row) {
      this.$util.http.get(`/excel/09/${row.id}`).then(res => {
        this.form = res.data
      }).catch(err => {
        console.log(err)
      })
      this.dialogFormVisible = true
    },
    showData (page = 1) {
      this.page = page
      this.$util.http.get(`/excel/09?page=${page-1}&size=50&statisticalTime=${this.selectDate}&name=${this.name}`).then(res => {
        this.tableData = res.data.content
        this.total = res.data.totalPages
      }).catch(err => {
        console.log(err)
      })
    },
    updateForm () {
      this.$util.http({
        method: 'put',
        url: '/excel/09',
        params: this.form  
      }).then(res => {
        if (res.status == 200) {
          this.dialogFormVisible = false
          this.$notify.success({
            title: '处理结果',
            // eslint-disable-next-line standard/object-curly-even-spacing
            message: this.$createElement('i', { style: 'color: teal' }, '修改成功!!!')
          })
          this.showData()
        } else {
          this.$notify.error({
            title: '处理结果',
            // eslint-disable-next-line standard/object-curly-even-spacing
            message: this.$createElement('i', { style: 'color: teal' }, '修改失败，表单数据有问题')
          })
        }
      }).catch(err => {
        console.log(err)
      })
    },
    delData (row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$util.http.delete(`/excel/09?id=${row.id}`).then(res => {
          if (res.data === true) {
            this.$notify.success({
              title: '处理结果',
              // eslint-disable-next-line standard/object-curly-even-spacing
              message: this.$createElement('i', { style: 'color: teal' }, '删除成功!!!')
            })
            this.showData()
          } else {
            this.$notify.error({
              title: '处理结果',
              // eslint-disable-next-line standard/object-curly-even-spacing
              message: this.$createElement('i', { style: 'color: teal' }, '删除失败。。')
            })
          }
        })
      })
    }
  },
  mounted () {
    this.selectDate = this.$store.state.app.date
    this.showData()
  },
  watch: {
    selectDate (newVal) {
      this.$store.commit('app/setDate', newVal)
      console.log(this.$store.state.app.date);
    }
  },
  data () {
    return {
      selectDate: null,
      tableData: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: '120px',
      name: '',
      page: 1,
      total: 0,
      form: {
        id: ''
      }
    }
  }
}

</script>

<style scoped>
.import {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
</style>
